<template>
  <div id="activeList">
    <h1 class="con-right-title">
      通知管理
    </h1>
    <div class="bottom-box">
      <!-- table -->
      <div class="table">
        <!-- 上部搜索条件 -->
        <topSearch :form-inline="formInline"></topSearch>
        <!-- 表格部分 -->
        <el-table :data="tableData" style="width: 100%">
          <el-table-column
            type="index"
            width="60"
            align="center"
            label="序号"
          ></el-table-column>
          <el-table-column prop="id" label="通知编号(ID)" width="150">
            <template slot-scope="scope">
              <el-button type="text">
                {{ scope.row.id }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="touchChannel"
            label="触达通道"
          ></el-table-column>
          <el-table-column
            prop="title"
            label="标题"
            width="180"
          ></el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            min-width="150"
          ></el-table-column>
          <el-table-column
            prop="publishPerson"
            label="发布者"
            width="100"
          ></el-table-column>
          <el-table-column prop="firstStatus" label="一审状态">
            <template slot-scope="scope">
              <span v-if="scope.row.firstStatus === 1" class="tag-span default"
                >未审核</span
              >
              <span
                v-else-if="scope.row.firstStatus === 2"
                class="tag-span primary"
                >已通过</span
              >
              <span
                v-else-if="scope.row.firstStatus === -1"
                class="tag-span warning"
                >未通过</span
              >
            </template>
          </el-table-column>
          <el-table-column prop="secondStatus" label="二审状态">
            <template slot-scope="scope">
              <span v-if="scope.row.secondStatus === 1" class="tag-span default"
                >未审核</span
              >
              <span
                v-else-if="scope.row.secondStatus === 2"
                class="tag-span primary"
                >已通过</span
              >
              <span v-else class="tag-span warning">未通过</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="publishTime"
            label="发布时间"
            min-width="150"
          ></el-table-column>
          <el-table-column
            label="操作"
            prop="secondStatus"
            fixed="right"
            width="170"
          >
            <template slot-scope="scope">
              <div
                v-if="
                  scope.row.firstStatus === 1 && scope.row.secondStatus === 1
                "
              >
                <el-button type="text" @click="pass(scope.row)">
                  审核通过
                </el-button>
                <el-button type="text" @click="noPass(scope.row)">
                  不通过
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <div class="page">
          <el-pagination
            v-if="total > 0"
            background
            :layout="
              total <= searchParams.pageSize
                ? 'total'
                : 'total, prev, pager, next, jumper'
            "
            :total="total"
            :page-size="searchParams.pageSize"
            :current-page="searchParams.pageNum"
            @current-change="changePage"
          ></el-pagination>
        </div>
        <!-- 审核通过对话框 -->
        <passDialog :pass-dialog-data="passDialogData"></passDialog>
        <!-- 审核不通过对话框 -->
        <noPassDialog :no-pass-dialog-data="noPassDialogData"></noPassDialog>
      </div>
    </div>
  </div>
</template>
<script>
import topSearch from '@component/publish/notice/topSearch' // 上部搜索条件
import passDialog from '@component/publish/notice/passDialog' // 审核通过对话框
import noPassDialog from '@component/publish/notice/noPassDialog' // 审核不通过对话框
export default {
  components: {
    topSearch,
    noPassDialog,
    passDialog
  },
  data() {
    return {
      // 搜索条件
      formInline: {
        firstStatus: 0, // 一审状态,默认全部
        secondStatus: 0, // 二审状态,默认全部
        touchChannel: 0, // 触达通道,默认全部
        title: 0, // 标题
        date: '' // 选择的时间
      },
      // 表格数据
      tableData: [
        {
          id: 'HD001', // 通知编号
          touchChannel: '推送', // 触达通道
          title: '设计师作品评选通知', // 标题
          publishPerson: 'admin', // 发布者
          publishTime: '2019-08-04 12:20:20', // 发布时间
          firstStatus: 1, // 一审状态 1未审核 2已通过 -1未通过
          secondStatus: 1, // 二审状态 1未审核 2已通过 -1未通过
          createTime: '2019-08-05 12:20:20' // 创建时间
        },
        {
          id: 'HD001', // 通知编号
          touchChannel: '推送', // 触达通道
          title: '设计师优秀作品评选通知', // 标题
          publishPerson: 'admin', // 发布者
          publishTime: '2019-08-04 12:20:20', // 发布时间
          firstStatus: 2, // 一审状态 1未审核 2已通过 -1未通过
          secondStatus: 2, // 二审状态 1未审核 2已通过 -1未通过
          createTime: '2019-08-05 12:20:20' // 创建时间
        },
        {
          id: 'HD001', // 通知编号
          touchChannel: '推送', // 触达通道
          title: '设计师优秀作品评选通知', // 标题
          publishPerson: 'admin', // 发布者
          publishTime: '2019-08-04 12:20:20', // 发布时间
          firstStatus: -1, // 一审状态 1未审核 2已通过 -1未通过
          secondStatus: -1, // 二审状态 1未审核 2已通过 -1未通过
          createTime: '2019-08-05 12:20:20' // 创建时间
        }
      ],
      // 审核通过对话框
      passDialogData: {
        isShow: false, // 控制审核通过对话框显示
        params: '' // 传递的参数
      },
      // 审核不通过对话框
      noPassDialogData: {
        isShow: false, // 控制不通过对话框显示
        params: '' // 传递的参数
      },
      // 分页数据
      page: 1, // 当前页数
      row: 10, // 页面显示条数
      total: 50 // 总数
    }
  },
  methods: {
    // 审核通过
    pass(row) {
      this.passDialogData.isShow = true // 显示审核通过对话框
    },
    // 审核不通过
    noPass(row) {
      this.noPassDialogData.isShow = true // 显示审核不通过对话框
    },
    /* 换页 */
    changePage(page) {
      this.page = page
      // this.searchList();
    }
  }
}
</script>
<style lang="less" scoped>
.tag-success {
  background: #1dc8a4;
}
</style>
